<template>
    <van-tabbar class="nav-menu-01" fixed v-model="active">
        <van-tabbar-item :to="{path:'/knowledge/KnowledgeList', replace:true}" >
            <i slot="icon" slot-scope="props" class="menu-icon-list tabIcon"></i>
                <!--知识列表-->
            <span>{{ $t("knowledge_list") }}</span>
        </van-tabbar-item>
        <van-tabbar-item :to="{path:'/knowledge/KnowledgeRanking', replace:true}" >
            <i slot="icon" slot-scope="props" class="menu-icon-ranking tabIcon"></i>
            <!--知识排行-->
             <span>{{ $t("knowledge_rank") }}</span>
        </van-tabbar-item>
        <van-tabbar-item :to="{path:'/knowledge/MySharing', replace:true}" >
                <i slot="icon" slot-scope="props" class="menu-icon-share tabIcon"></i>
            <!--我的分享-->
            <span>{{ $t("knowledge_share") }}</span>
        </van-tabbar-item>
    </van-tabbar>
</template>

<script>
export default {
    name: 'KnowledgeBottomNav',
    components: {},
    data() {
        return {
            path: '',
            active: 0
        };
    },
    mounted() {
        this.path = this.$route.path;
        this.active = this.activeIndex;
    },
    computed: {
        // 根据当前路由计算应该激活的TabBar项的索引
        activeIndex() {
            const paths = ['/knowledge/KnowledgeList', '/knowledge/KnowledgeRanking', '/knowledge/MySharing'];
            return paths.findIndex(path => this.$route.path.startsWith(path));
        },
        pathSelected() {
            return function(tab) {
                if (this.$route.path.toUpperCase().indexOf(tab.toUpperCase()) !== -1) {
                    return true;
                } else {
                    return false;
                }
            };
        }
    },
    watch: {
        // 监听路由变化，更新active属性
        '$route': {
            handler() {
                this.active = this.activeIndex;
            },
            immediate: true // 页面加载时立即执行
        }
    }
};
</script>

<style scoped>
    .menu-icon-list, .menu-icon-ranking, .menu-icon-share {
        display: block;
        width: 100%;
        height: 100%;
        background: url(./images/knowledge-bottom-nav-gray.png) no-repeat 5px -3px;
        background-size: 19px;
    }
    .nav-menu-01 .van-tabbar-item--active .menu-icon-list {
        background: url(./images/knowledge-bottom-nav-blue.png) no-repeat 5px -3px;
        background-size: 19px;
    }
    .menu-icon-ranking {
        background-position: 5px -37px;
    }
    .nav-menu-01 .van-tabbar-item--active .menu-icon-ranking {
        background: url(./images/knowledge-bottom-nav-blue.png) no-repeat 5px -37px;
        background-size: 19px;
    }
    .menu-icon-share {
        background-position: 5px -72px;
    }
    .nav-menu-01 .van-tabbar-item--active .menu-icon-share {
        background: url(./images/knowledge-bottom-nav-blue.png) no-repeat 5px -72px;
        background-size: 19px;
    }
    .tabIcon{
        display: inline-block;
        width: 30px;
        height: 24px;
        text-align: center;
        line-height: 28px;
    }
</style>
